<template>
  <div class="user-info-box">
    <div class="img-box">
      <img src="https://img2.baidu.com/it/u=3801884915,270435659&fm=26&fmt=auto">
    </div>
    <div class="user-detail-box">
      <div class="avatar">
        <a-avatar
          :size="64"
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
        />
      </div>
      <div class="username">
        蓝胖子
      </div>
      <div class="role">
        角色:管理员
      </div>
      <div class="create-time">
        2020年1月21日
      </div>
      <div class="sign">
        彪悍的人生不需要解释!
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>
<style lang="less" scoped>
.user-info-box {
    max-width: 1249px;
    min-height: 700px;
    margin: 10px auto 0px;
    background: #fff;
    border-radius: 5px;
    .img-box {
        img {
            border-radius: 5px;
            width: 1229px;
            height: 220px;
            margin: 5px 10px 10px;
        }
    }
    .user-detail-box {
        text-align: center;
        padding: 20px 10px;
        .username {
            font-size: 20px;
        }
    }
}
</style>
